<script>
import api from "../api/navigation";
import { mapState } from "vuex";
export default {
    name: "Sub-Menu",
    props: ["menuInfo", "turnToMainFrame"],
    data() {
        return {
            serverUrl: api.API_URL_DFS + "/static/",
            menuIconStyle: {
                minWidth: "14px",
                marginRight: "10px",
                fontSize: "14px",
                display: "inline-block",
                lineHeight: "14px",
                textAlign: "center",
                textTransform: "none",
                verticalAlign: "-0.125em",
            },
        };
    },
    computed: {
        filterIconUrl() {
            return function(value) {
                if (value == null || value == "") return "";
                value = value.toString();
                return value.indexOf("http") > -1 ? value : this.serverUrl + value;
            };
        },
        ...mapState({
            openKeys: state => state.Navigation.openTreeKeys,
            selectedKeys: state => state.Navigation.selectedTreekeys,
            collapsed: state => state.Navigation.collapsed,
        }),
    },
    methods: {
        loopMenuItem(data) {
            return (
                <a-menu-item-group>
                    {data.children
                        ? data.children.map(item => {
                              return item.children != "" && item.children != null && item.children != "null" && item.children.length > 0 ? (
                                  <a-sub-menu key={item.key}>
                                      <div slot="icon" class="submenu-title-wrapper" onClick={() => this.onSubMenuTitleClick(event, item)}>
                                          <i class="anticon">
                                              <div
                                                  {...{
                                                      style:
                                                          "background:#ffffff url(" +
                                                          this.filterIconUrl(item.icon) +
                                                          ") no-repeat center top;width:14px;height:14px;background-size:100%",
                                                  }}></div>
                                          </i>
                                      </div>
                                      <div slot="title" onClick={() => this.onSubMenuTitleClick(event, item)} style="width:80%" data-key={item.key}>
                                          {item.title}
                                      </div>
                                      <a-menu-item-group>{this.loopMenuItem(item)}</a-menu-item-group>
                                  </a-sub-menu>
                              ) : (
                                  <a-menu-item key={item.key} onClick={() => this.onMenuItemTitleClick(item)}>
                                      <i class="anticon">
                                          <div
                                              {...{
                                                  style:
                                                      "background:#ffffff url(" +
                                                      this.filterIconUrl(item.icon) +
                                                      ") no-repeat center top;width:14px;height:14px;background-size:100%",
                                              }}></div>
                                      </i>
                                      <span>{item.title}</span>
                                  </a-menu-item>
                              );
                          })
                        : null}
                </a-menu-item-group>
            );
        },
        expandIconDom() {
            return (
                <div style="width:20%" onClick={this.expandIconClick}>
                    <i class="ant-menu-submenu-arrow" style="pointer-events: none;"></i>
                </div>
            );
        },
        expandIconClick(event) {
            let li = event.target.parentNode.parentNode;
            if ("classList" in li && typeof li.classList.contains === "function") {
                let isExpand = li.classList.contains("ant-menu-submenu-open");
                if (isExpand) {
                    this.$store.commit("Navigation/foldMenuItem", event.target.previousElementSibling.getAttribute("data-key"));
                } else {
                    this.$store.commit("Navigation/expandMenuItem", event.target.previousElementSibling.getAttribute("data-key"));
                }
            }

            event.stopPropagation();
        },
        onMenuItemTitleClick(item) {
            let menuLiArray = document.getElementById("left-menu").getElementsByClassName("ant-menu-submenu");
            for (let i = 0; i < menuLiArray.length; i++) {
                menuLiArray[i].classList.remove("ant-menu-item-selected");
            }
            this.$store.commit("Navigation/setSelectedMenuItem", item.key);
            this.turnToMainFrame(item);
        },
        onSubMenuTitleClick(event, item) {
            if (item.url) {
                let menuLiArray = document.getElementById("left-menu").getElementsByTagName("li");
                for (let i = 0; i < menuLiArray.length; i++) {
                    menuLiArray[i].classList.remove("ant-menu-item-selected");
                }

                let li = event.target.parentNode.parentNode;
                li.classList.add("ant-menu-item-selected");

                this.$store.commit("Navigation/setSelectedMenuItem", item.key);
                this.turnToMainFrame(item);
            } else {
                this.$store.commit("Navigation/toggleMenuItem", item.key);
            }
        },
    },
    render() {
        return (
            <div>
                <a-menu
                    mode="inline"
                    openKeys={this.openKeys}
                    selectedKeys={this.selectedKeys}
                    expandIcon={this.expandIconDom}
                    inlineCollapsed={this.collapsed}>
                    {this.menuInfo
                        ? this.menuInfo.map(item => {
                              return item.children != "" && item.children != null && item.children != "null" && item.children.length > 0 ? (
                                  <a-sub-menu key={item.key}>
                                      <div slot="icon" onClick={() => this.onSubMenuTitleClick(event, item)}>
                                          {item.icon ? (
                                              <i class="anticon">
                                                  <div
                                                      {...{
                                                          style:
                                                              "background:#ffffff url(" +
                                                              this.filterIconUrl(item.icon) +
                                                              ") no-repeat center top;width:14px;height:14px;background-size:100%",
                                                      }}></div>
                                              </i>
                                          ) : (
                                              <a-icon type="desktop" />
                                          )}
                                      </div>
                                      <div slot="title" onClick={() => this.onSubMenuTitleClick(event, item)} style="width:80%" data-key={item.key}>
                                          <a-icon type="mail" />
                                          {item.title}
                                      </div>
                                      {this.loopMenuItem(item, 1)}
                                  </a-sub-menu>
                              ) : (
                                  <a-menu-item key={item.key} onClick={() => this.onMenuItemTitleClick(item)}>
                                      {item.icon ? (
                                          <i class="anticon">
                                              <div
                                                  {...{
                                                      style:
                                                          "background:#ffffff url(" +
                                                          this.filterIconUrl(item.icon) +
                                                          ") no-repeat center top;width:14px;height:14px;background-size:100%",
                                                  }}></div>
                                          </i>
                                      ) : (
                                          <a-icon type="desktop" />
                                      )}
                                      <span>{item.title}</span>
                                  </a-menu-item>
                              );
                          })
                        : null}
                </a-menu>
            </div>
        );
    },
};
</script>
<style>
#left-menu .ant-menu-submenu-title {
    display: flex;
    justify-content: space-between;
    padding-right: 15px;
}
</style>
